import React, { useState } from "react";
import { Radio, Modal, Button } from "antd";

const RadioGroup = Radio.Group;

const App = () => {
  const [radioValue, setRadioValue] = useState(undefined); // 初始未选中
  const [visible, setVisible] = useState(false); // Modal的可见性
  const [targetValue, setTargetValue] = useState(undefined); // 用户可能想要选中的值

  // 显示Modal的函数，并设置targetValue（如果需要的话）
  const showModal = (value) => {
    setTargetValue(value); // 假设这里我们根据某些逻辑设置了targetValue
    setVisible(true);
  };

  // Modal的确认函数
  const handleOk = () => {
    if (targetValue !== undefined) {
      setRadioValue(targetValue); // 如果targetValue有值，则更新Radio的选中状态
    }
    setVisible(false); // 关闭Modal
  };

  // Modal的取消函数
  const handleCancel = () => {
    setVisible(false); // 关闭Modal，不改变Radio的选中状态
  };

  // Radio的onChange事件处理函数
  const onChange = (e) => {
    // 这里不直接改变radioValue，而是先弹出Modal进行确认
    showModal(e.target.value); // 传递用户可能想要选中的值给Modal
  };

  return (
    <>
      <RadioGroup onChange={onChange} value={radioValue}>
        <Radio.Button value="1">Option 1</Radio.Button>
        <Radio.Button value="2">Option 2</Radio.Button>
        <Radio.Button value="3">Option 3</Radio.Button>
      </RadioGroup>

      <Modal
        title="确认"
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>
          确定要选中{" "}
          {targetValue === undefined
            ? "这个选项吗？"
            : `“${targetValue}”这个选项吗？`}
        </p>
      </Modal>
    </>
  );
};

export default App;
